<template>
    <div>
        <div class="layout-main">
            <div style="display:flex;item-align:center;padding-top:10px;padding-bottom:10px;margin-top:50px;margin-bottom:30px">  
                <el-breadcrumb separator-class="el-icon-arrow-right">
                    <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
                    <el-breadcrumb-item :to="{ path: '/supplyDemand' }">供需展示</el-breadcrumb-item>
                    <el-breadcrumb-item>企业讯息</el-breadcrumb-item>
                </el-breadcrumb>
            </div>
            <div>
                <div slot="header" class="clearfix">
                    <span style="font-weight:bold">公司介绍</span>
                </div>
                <div style="display:flex">
                    <img display:block style="position:absolute;top:20%;left:20%;height:50%;width:50%;" src="require(item.image)" alt="公司标志">
                    <div class="text item">
                        <div style="font-size:15px;font-weight:bold;margin-bottom:5px">{{ item.name }}</div>
                        <div style="line-height:12px;">{{ item.description }}</div>
                    </div>
                </div>
            </div>

            <ul class="infinite-list" v-infinite-scroll="load" style="overflow:auto">
                <li :v-for="i in count" class="infinite-list-item">
                    <!-- 取回前i条产品记录-->
                </li>
            </ul>


        </div>
    </div>
</template>

<script>


export default ({
    data() {
        return{
            queryInfo:{id:'1'},
            item:{'id':'1','name':'浪潮云信息技术公司','num':'182011204411','mail':'example@eecc.com','description':'经营范围包括云计算、工业互联网、信息、网络科技专业领域内从事技术开发、技术咨询、技术转让、技术服务；计算机系统集成；网络工程；计算机软硬件的开发、技术服务、销售；互联网零售；增值电信业务。'},
            imgsrc:"../assets/logo.png",
            count: 0
        };
    },
    methods:{
        async getItem(){
            const {data:res} = await this.$http.post("getItem",this.queryInfo)
            this.item = res.item;
        },
        load () {
            this.count += 2
        }
    },

})
</script>

<style scoped>

.layout-main
{
    margin-left: 120px;
    margin-right: 120px

}
/* 分两边的 */
.d-wrapper
{
    
    display:flex;
    justify-content: center;
    position:relative;
    width:100%;
    height:400px;
    margin-top:30px;
    margin-bottom:30px;
}
  .text {
    font-size: 14px;
    text-align: left;
  }

.text-area
{
    font-size: 14px;
    text-align: left;
    line-height: 60px;
}

  .item {
    margin-bottom: 18px;
  }

  .clearfix
  {
    text-align:left;
  }

  .clearfix:before,
  .clearfix:after {
    display: table;
    content: "";
  }
  .clearfix:after {
    clear: both
  }

  .box-card {
    box-shadow: gray 0px 0px 10px 2px;
    width: 80%;
    margin-bottom:30px;
  }
#TA
{
   
   height:300px;
   width:80%;
   padding:20px 20px 10px 10px;
   margin-top:80px;
   margin-bottom:30px;
   padding-top:30px;
   padding-bottom:30px;
   box-sizing: border-box;
   position:relative;

}
</style>